<template>
  <view class="order-box">
    <Sub-title
      :label="data.areaName || '-'"
      size="28rpx"
      color="#fff"
      :right-text="`￥${data.amount || 0}`"
      right-color="#FFAC5F"
      padding="0 0 20rpx 0"
    />
    <Sub-title
      :label="`时间：${formatDate(data.startTime)}~${formatDate(data.endTime)}`"
      size="24rpx"
      :bold="false"
      color="#DADADA"
      padding="10rpx 0 0"
    />
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  methods: {
    // 格式化时间
    formatDate(val) {
      return val ? val.substr(0, 16) : "-";
    },
  },
};
</script>

<style lang="scss" scoped>
.order-box {
  height: auto;
  margin: 30rpx;
  border-radius: 30rpx;
  padding: 30rpx;
  background: linear-gradient(
    180deg,
    rgba(36, 222, 115, 0.35) 0%,
    rgba(255, 255, 255, 0.35) 82.29%
  );
  backdrop-filter: blur(20rpx);
  .order-info {
    padding: 0 0 30rpx 0;
    border-bottom: 1rpx solid #d9d9d999;
    image {
      width: 112rpx;
      height: 112rpx;
      border-radius: 10rpx;
      background-color: #00000080;
      margin-right: 20rpx;
    }
    .f-1 {
      height: 112rpx;
    }
  }
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn-item {
      padding: 10rpx 24rpx;
      border-radius: 10rpx;
      color: #24de73;
      border: 1rpx solid #24de73;
      margin-right: 20rpx;
      &:active {
        color: #fff;
        background-color: #25ca6a;
      }
      &:last-child {
        margin-right: 0;
      }
    }
    .bg-green {
      color: #fff;
    }
  }
}
</style>
